<template>
    <router-view></router-view>
</template>

<script setup>
    import {ElMessage} from 'element-plus';
    import {getCurrentInstance, onMounted} from 'vue';
    import {useStore} from 'vuex';

    const {proxy} = getCurrentInstance();
    const store = useStore();
    let refresh = true;//是否刷新页面

    onMounted(() => {
        proxy.$socket.io.on('connect', async () => {
            await store.dispatch('handleChangeConnectStatus', true);
            if (!refresh) {
                proxy.$socket.io.emit('login', store.getters.getUserInfo);
                ElMessage({
                    showClose: false,
                    message: 'socket通信连接',
                    type: 'success',
                });
            }
            refresh = false;
        });
        proxy.$socket.io.on('disconnect', async () => {
            await store.dispatch('handleChangeConnectStatus', false);
            ElMessage({
                showClose: false,
                message: 'socket通信断开',
                type: 'error',
            });
        });
        proxy.$socket.io.on('connect_error', async () => {
            await store.dispatch('handleChangeConnectStatus', false);
        });
    })
</script>

<style lang="less">
    :root {
        --el-color-primary: #9b8d80 !important;
        --el-color-primary-light-3: #9b8d80 !important;
        --el-color-primary-light-5: #9b8d80 !important;
        --el-color-primary-light-7: #9b8d80 !important;
        --el-color-primary-dark-2: #9b8d80 !important;
        --el-color-primary-light-9: rgba(155, 141, 128, 0.2) !important;
    }

    :focus-visible {
        outline: none;
    }

    html, body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        height: 100%;
    }


    a {
        text-decoration: none;
        font-size: 12px;

        &:hover {
            text-decoration: none;
        }
    }

    .custom-scrollbar {

        &.none {
            &::-webkit-scrollbar {
                width: 0;
            }
        }

        &::-webkit-scrollbar-button {
            display: none;
        }

        &::-webkit-scrollbar {
            width: 8px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }

        &::-webkit-scrollbar-thumb {
            background: #ddd;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
    }

    .one-line-hidden {
        overflow: hidden;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .flex {
        display: flex;

        &.align-items-center {
            align-items: center;
        }

        &.justify-content-center {
            justify-content: center;
        }

        &.justify-content-flex-end {
            justify-content: flex-end;
        }

        &.justify-content-space-between {
            justify-content: space-between;
        }

        &.justify-content-space-around {
            justify-content: space-around;
        }

        &.row-reverse {
            flex-direction: row-reverse;
        }

        &.column {
            flex-direction: column;
        }


        .flex-1 {
            flex: 1;
        }
    }

</style>
